<script>
import Drugs from "@/views/system/Drugs/index.vue";
import PrescriptionDetailed from "@/views/system/PrescriptionDetailed/index.vue";

export default {
  name: "DrugManage",
  components: {
    PrescriptionDetailed,
    Drugs
  },
  data() {
    return {
      activeName: 'audit',
    };
  },
  mounted() {
    this.onQuery();
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
      var that = this;
      setTimeout(function () {
        that.onQuery();
      }, 500);
    },

    onQuery() {
      this.$refs[this.activeName].getList();
    },
  }
}
</script>

<template>
  <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
    <!-------------------------------------------------------->
    <el-tab-pane label="药品管理" name="audit">
      <Drugs v-if="activeName == 'audit'" ref="audit"/>
    </el-tab-pane>
    <!-------------------------------------------------------->
    <el-tab-pane label="发药管理" name="pass">
      <PrescriptionDetailed v-if="activeName == 'pass'" ref="pass"/>
    </el-tab-pane>
  </el-tabs>
</template>


<style>
el-tabs {
  height: 80%;
  width: 80%;
  margin: 10px auto;
}
</style>
